import { ref,reactive,computed } from "vue"
import { toast } from '~/composables/util'

// 列表分页和搜索
export function useInitTable(opt = {}) {
    // 赋值搜索表单和重置表单请求数据的功能
    let searchForm = null
    let resetSearchForm = null
    if(opt.searchForm){
        searchForm = reactive({ ...opt.searchForm })
        // 重置表单功能,重新赋值成之前传过来的空表单数据
        resetSearchForm = ()=>{
            for (let key in opt.searchForm) {
                searchForm[key] = opt.searchForm[key]
            }
            getData()
        }
    }

    // 表格数据和loading
    const tableData = ref([])
    const loading = ref(false)

    // 分页
    const currentPage = ref(1)
    const total = ref(0)
    const limit = ref(10)
    
    // 管理员状态修改
    const handleStatusChange = (status,row) => {
        // 显示加载动画
        row.statusLoading = true
        opt.updateStatus(row.id,status).then(res => {
            // 提示修改成功并把状态设为修改后状态
            toast('状态修改成功')
            row.status = status
        }).finally(() =>{
            // 最后隐藏加载动画
            row.statusLoading = false
        })
    }

    // 删除方法
    const handleDelete = (id) => {
        // 显示加载动画
        loading.value = true
        opt.delete(id).then(res => {
            // 提示并重新渲染数据
            toast('删除成功')
            getData()
        }).finally(() => {
            // 最后隐藏加载动画
            loading.value = false
        })
    }

    // 获取数据
    function getData(p = null) {
        if (typeof p == "number") {
            currentPage.value = p
        }
        // 显示加载动画
        loading.value = true
        opt.getList(currentPage.value, searchForm)
            .then(res => {
                // 有特殊情况赋值
                if(opt.onGetListSuccess && typeof opt.onGetListSuccess == "function"){
                    opt.onGetListSuccess(res)
                } else {
                    // 赋值
                    tableData.value = res.data.list
                    total.value = res.data.totalCount
                }
            })
            .finally(() => {
                // 隐藏加载动画
                loading.value = false
            })
    }

    getData()

    return {
        searchForm,
        resetSearchForm,
        tableData,
        loading,
        currentPage,
        total,
        limit,
        handleStatusChange,
        handleDelete,
        getData
    }
}

// 封装的表单新增和修改
export function useInitForm(opt = {}) { 
    // 响应式id用于判断是新增还是删除
    const editId = ref(0)
    // 设置响应式标题用于判断抽屉标题是新增还是修改
    const drawTitle = computed(() => editId.value ? '修改' : '新增')
    // 初始化加载过来的抽屉
    const formDrawerRef = ref(null)
    // 设置默认表单
    const defaultForm = opt.form
    // 初始化表单数据
    const form = reactive({})
    const formRef = ref(null)
    // 接收定义表单校验规则
    const rules = opt.rules || {}

    // 重置表单(根据新增和修改赋值)
    function resetForm(row = false){
        if(formRef.value) formRef.value.clearValidate()
        for(let key in defaultForm){
            form[key] = row[key]
        }
    }

    // 打开抽屉-修改
    const handleUpdate = (row) => {
        // 打开抽屉
        formDrawerRef.value.open()
        // 赋值响应式激活id
        editId.value = row.id
        // 赋值表单数据
        resetForm(row)
    } 

    // 打开抽屉-新增
    const handleCreate = () => {
        // 打开抽屉
        formDrawerRef.value.open()
        // 使得响应式id为0
        editId.value = 0
        // 清空之前的旧表单数据
        resetForm(defaultForm)
    }

    // 抽屉提交方法
    const handleSubmit = () => {
        formRef.value.validate((valid) => {
            // 校验失败
            if(!valid){
                return
            }
            // 使得加载按钮禁用
            formDrawerRef.value.openLoading()
            // 这里进行判断是新增接口还是修改接口
            const fun = editId.value ? opt.update(editId.value,form) : opt.create(form)
            fun.then(res => {
                // 提示并重新渲染第一页数据
                toast(drawTitle.value + '成功')
                opt.getData(editId.value ? false : 1)
            }).finally(() => {
                // 抽屉关闭按钮启用
                formDrawerRef.value.close()
                formDrawerRef.value.closeLoading()
            })
        })
    }

    return {
        editId,
        drawTitle,
        formDrawerRef,
        form,
        formRef,
        rules,
        resetForm,
        handleUpdate,
        handleCreate,
        handleSubmit
    }   
}

